<template>
  <layout title="slideVerify滑动验证">
    <layout-content title="基础使用">
      <tn-slide-verify ref="verifyRef1"></tn-slide-verify>
    </layout-content>

    <layout-content title="自定义宽高">
      <view class="tn-flex-center tn-full-width">
        <tn-slide-verify
          ref="verifyRef2"
          width="90%"
          height="60rpx"
          font-size="20rpx"
        ></tn-slide-verify>
      </view>
    </layout-content>

    <layout-content title="自定义颜色">
      <tn-slide-verify
        ref="verifyRef3"
        color="#24F083"
        bg-color="#D3FCE6"
        active-bg-color="#1DC069"
      ></tn-slide-verify>
      <view class="tn-margin-top-sm">
        <tn-slide-verify
          ref="verifyRef4"
          color="tn-color-blue"
          bg-color="tn-bg-blue--light"
          active-bg-color="tn-bg-blue--disabled"
        ></tn-slide-verify>
      </view>
    </layout-content>

    <layout-content title="文案修改">
      <tn-slide-verify
        ref="verifyRef5"
        tips-text="滑动发送验证码"
        success-tips-text="验证码已发送"
        icon="phone"
        success-icon="phone-fill"
        @success="sendVerifyCode"
      ></tn-slide-verify>
    </layout-content>

  </layout>

  <view class="tn-full-width tn-flex-center">
    <tn-button size="lg" @click="resetVerify">重置验证状态</tn-button>
  </view>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnSlideVerify from '@/tuniao-ui/components/tn-slide-verify/src/SlideVerify.vue'
import TnButton from '@/tuniao-ui/components/tn-button/src/Button.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

const verifyRef1 = ref<InstanceType<typeof TnSlideVerify>>()
const verifyRef2 = ref<InstanceType<typeof TnSlideVerify>>()
const verifyRef3 = ref<InstanceType<typeof TnSlideVerify>>()
const verifyRef4 = ref<InstanceType<typeof TnSlideVerify>>()
const verifyRef5 = ref<InstanceType<typeof TnSlideVerify>>()

// 重置验证状态
const resetVerify = () => {
  verifyRef1.value?.reset()
  verifyRef2.value?.reset()
  verifyRef3.value?.reset()
  verifyRef4.value?.reset()
  verifyRef5.value?.reset()
}

// 发送验证码
const sendVerifyCode = () => {
  uni.showLoading({
    mask: true
  })
  setTimeout(() => {
    uni.showToast({
      icon: 'none',
      title: '验证码已发送'
    })
  }, 1000);
}
</script>

<style lang="scss" scoped>
</style>
